import React, {useEffect, useState} from 'react';
import {
  ScrollView,
  View,
  Text,
  TouchableOpacity,
  ActivityIndicator,
  FlatList,
  Image,
  TextInput
} from 'react-native';
import { WebView } from 'react-native-webview';
import BaseUrl from '../../config/BaseUrl';
import {getNewsDetail} from '../../service/home';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import CommentInput from '../../components/CommentInput';
import styles from './style';
import {knowledgeDetail} from '../../service/common';

const KnowledgeDetail = (props) => {
  const {
    route: {
      params: {artId},
    },
  } = props;

  const navigation = useNavigation();
  const [shareVisible, setShareVisible] = useState(false);
  const [newsDetail, setNewsDetail] = useState(false);

  useEffect(() => {
    knowledgeDetail(artId).then((res)=>{
      console.log(res);
      setNewsDetail(res.data);
       navigation.setOptions({
        title: res.data?.artTitle,
      });
    });
  }, []);
  return (
    <AreaView>
      <ScrollView style={styles.container}>
        {/* <View style={styles.head}>
          <Text style={styles.head_left}>来源：{newsDetail?.fromSite}</Text>
          <Text style={styles.head_right}>{newsDetail?.createTime}</Text>
        </View> */}
        {/* <View style={styles.title}>
          <Text>{newsDetail?.artTitle}</Text>
        </View> */}
        <WebView
          useWebKit={true}
          style={styles.webview_container}
          originWhitelist={['*']}
          // source={{ html: newsDetail?.content }}
          source={{
            html:
              '<html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"></head><body><p>' +
              newsDetail?.content +
              '</p></body></html>',
          }}
        />
        {/* <Text>{newsDetail?.content}</Text> */}
      </ScrollView>
      {/* <CommentInput
        onShare={() => {
          setShareVisible(true);
        }}
      /> */}
      {shareVisible && (
        <View style={styles.share_container}>
          <View style={styles.share_type}>
            <TouchableOpacity  activeOpacity={1} style={styles.share_list} activeOpacity={1}>
              <Image
                source={require('../../assets/images/share/wechat.png')}
                style={styles.share_icon}
              />
              <Text style={styles.share_text}>微信</Text>
            </TouchableOpacity>
            <TouchableOpacity  activeOpacity={1} style={styles.share_list} activeOpacity={1}>
              <Image
                source={require('../../assets/images/share/wxf.png')}
                style={styles.share_icon}
              />
              <Text style={styles.share_text}>朋友圈</Text>
            </TouchableOpacity>
            <TouchableOpacity  activeOpacity={1} style={styles.share_list} activeOpacity={1}>
              <Image
                source={require('../../assets/images/share/weibo.png')}
                style={styles.share_icon}
              />
              <Text style={styles.share_text}>微博</Text>
            </TouchableOpacity>
            <TouchableOpacity  activeOpacity={1} style={styles.share_list} activeOpacity={1}>
              <Image
                source={require('../../assets/images/share/qq.png')}
                style={styles.share_icon}
              />
              <Text style={styles.share_text}>QQ</Text>
            </TouchableOpacity>
            <TouchableOpacity  activeOpacity={1} style={styles.share_list} activeOpacity={1}>
              <Image
                source={require('../../assets/images/share/kj.png')}
                style={styles.share_icon}
              />
              <Text style={styles.share_text}>QQ空间</Text>
            </TouchableOpacity>
          </View>
          <TouchableOpacity
            onPress={() => setShareVisible(false)}
            style={styles.cancel}>
            <Text style={styles.cancel_text}>取消</Text>
          </TouchableOpacity>
        </View>
      )}
    </AreaView>
  );
};

export default KnowledgeDetail;
